<template>
	<view class="content" style="background-color: #f5f5f5;">
		<u-navbar scrollable=false titleStyle="font-size:40rpx;color:#333" :placeholder='true' :title="type==1?'修改手机号':'验证手机号'"
			:autoBack="true">
		</u-navbar>
		<view class="form fontS32">
			<view class="li flexJBC">
				<text class="fw4">当前绑定手机号</text>
				<view class="">
					<text class="co9">{{phone}}</text>
					<text class="homeRed" style="text-decoration: underline;margin-left: 16rpx;"
						@click="getCode">{{num==61?'获取验证码':num}}</text>
				</view>
			</view>
			<view class="li flexJBC">
				<view class="fw4" style="width: 50%;">验证码 </view><input type="text" class="input" placeholder="请输入" name="" id="" maxlength="6" v-model="code">
			</view>
			<view class="li flexJBC" style="margin-top: 24rpx;" v-if="type==1">
				<text class="fw4">输入新的手机号 </text>
				<view class="" style="width: 55%;">
					<PhoneBox :showArea='showArea' @setShowArea='setShowArea' @setnewPhone='setnewPhone'></PhoneBox>
				</view> 
			</view>
		</view>
		<view class="paddingLR24">
			<u-button :loading='loading' class="redbtn bgcred cof fontS32 "   @click="submit" style='margin-top:220rpx'>
					确定
			</u-button>
		</view>
	</view>
</template>



<script>
	import PhoneBox from '@/componentes/phone.vue'
	export default {
		data() {
			return {
				code:'',
				loading:false,
				showArea:false,
				num: 61,
				phone: uni.getStorageSync('userInfo').phone,
				area:'',
				newPhone:'',
				type:'', //2为 设置支付密码的验证手机号  1为修改手机号  3为修改支付密码（忘记密码） 5修改账户密码
			}
		},
		components:{PhoneBox},
		onLoad(option) {
			if(option){
				this.type=option.type
			}
		},
		methods: { 
			submit(){
				if(!this.code){
					this.$my.toast('请先完成表单')
					return
				}
				this.loading=true
				let data;
				// 修改手机号
				if(this.type==1){ 
					data={phone_code:this.code,phone:this.phone,type:1,now_phone:this.newPhone,phone_prefix:this.area?this.area:'86',}
					this.$my.post('/index/user/update_user_auth',data).then(res=>{
						this.loading=false
						this.$my.toast(res.message)
						if(res.code==200){
							this.$my.get('/index/user/get_user_info').then(res=>{
								if(res.code==200){
								   uni.setStorageSync('userInfo',res.data)
								}
							})
							this.$my.go('',500)
						}
					})
				}else{
					data={phone_code:this.code,phone:this.phone,type:this.type}
					if(this.type==2){
						// 设置支付密码
					} else if(this.type==3){
						// 修改支付密码（忘记密码）
					}else if(this.type == 5){
						// 修改账户密码 
					}
					this.$my.post('/index/user/check_phone_code',data).then(res=>{
						this.loading=false
						this.$my.toast(res.message)
						if(res.code==200){
							this.$my.get('/index/user/get_user_info').then(res=>{
								if(res.code==200){
								   uni.setStorageSync('userInfo',res.data)
								}
							})
							if(this.type==2 || this.type==3 || this.type==5){
								this.$my.go('/pages/my/set/changePassword?data=' + JSON.stringify(data))
							}
						}
					})
				}
			},
			setShowArea(val){
				console.log(val,'val')
				this.showArea=val.flag
				this.area=val.area
				console.log(this.area)
			},
			setnewPhone(val){
				this.newPhone=val
			},
			getCode() {
				this.$my.post('/index/user/sms',{phone:this.phone,}).then(res=>{
					this.$my.toast(res.message)
					if(res.code==200){
						this.num = 60
						let timer = setInterval(() => {
							this.num--
							if (this.num == 0) {
								clearInterval(timer)
								this.num = 61
							}
						}, 1000)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {

	
		// border: 2rpx solid #f5f5f5;
		.form {
			.li {
				background-color: white;
				padding: 0 4% 0;
				height: 100rpx;
				line-height: 100rpx;
				border-bottom: 2rpx solid #f6f6f6;

				.input {
					text-align: right;
					line-height: 100rpx;
					height: 100rpx;
				}
			}
		}
		.btn {
			border-radius: 46rpx;
			margin: 200rpx 4% 0;
			background-color: $red;
			color: white;
			font-weight: bold;
		}
	}
</style>
